<template>
   <div class="inspetion-video-dialog" id="InspetionVideoDialog" v-if="isShow">
    <!-- 头部 -->
    <div class="header">
      <div class="header-bg"></div>
      <div
        slot="header"
        class="header-title"
        >
        {{ videoTitle }}
      </div>
      <div class="header-close" @click="isShow = false"></div>
    </div>
    <!-- 内容 -->
    <div class="main">
      <el-scrollbar style="height: 100%">
        <div id="iframeDom" class="iframeDom"></div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import { mouseDownLeft } from "@/assets/modules/utils";
import BasePaenl from "./CBase.vue";

@Component({
  name: "InspetionVideoDialog",
  components: {
    BasePaenl
  }
})
export default class extends Vue {
  get videoTitle() {
    return this.$store.getters["videoData/videoTitle"];
  }
  @Watch("videoCodeArr")
  handleVideoCodeArr() {
    this.$nextTick(() => {
      this.creatWindow();
    });
  }
  get panelWindowNum() {
    return this.$store.getters["videoData/panelWindowNum"];
  }
  @Watch("panelWindowNum")
  handlePanelWindowNum() {
    this.$nextTick(() => {
      this.creatWindow();
    });
  }
  get videoCodeArr() {
    return this.$store.getters["videoData/videoCodeArr"];
  }
  get videoType() {
    return this.$store.getters["videoData/videoType"];
  }
  iframeDom: any = null;
  domArr: any = [];
  //屏幕参数
  screenParams: any = {};
  // 视频弹窗
  @Prop({ default: false }) isShow?: boolean;
  created() {
    const win: any = window;
    this.screenParams = win.videoDataConfig.screenParams;
  }
  mounted() {
    console.log("mouted");
    this.$nextTick(() => {
      this.creatWindow();
    });
  }

  creatWindow() {
    const that = this;
    const win: any = window;
    let videoCodeArr = JSON.parse(JSON.stringify(this.videoCodeArr));
    console.log("videoCodeArr:" + this.videoCodeArr.length);
    console.log("panelWindowNum:" + this.panelWindowNum);
    if (this.videoCodeArr.length > this.panelWindowNum) {
      videoCodeArr = videoCodeArr.slice(0, this.panelWindowNum);
    }
    const divDom: any = document.getElementById("iframeDom");
    if(!divDom) return;
    this.domRemoveChildren(divDom);
    for (let index = 0; index < this.panelWindowNum; index++) {
      let iframeObj = win.imosSdk.createPanelWindow();
      // 如果窗格创建已经到达上限
      if (iframeObj === null) {
        return this.$message.warning("窗格创建已经到达上限");
      }
      try {
        iframeObj.height = that.screenParams[that.panelWindowNum].height;
        iframeObj.width = that.screenParams[that.panelWindowNum].width;
      } catch (error) {
        console.log(error);
      }
      divDom.appendChild(iframeObj);
      const cameraCode = videoCodeArr[index];
      if (cameraCode) {
        this.$nextTick(() => {
          if (this.videoType.type === "online") {
            this.playLive(iframeObj.id, cameraCode);
          } else {
            this.playRecord(
              iframeObj.id,
              cameraCode,
              this.videoType.start,
              this.videoType.end
            );
          }
        });
      }
    }
  }
  domRemoveChildren(divDom: any) {
    try {
      if (!divDom) return;
      divDom.innerHTML = "";
    } catch (error) {
      console.log(error);
    }
  }
  playLive(iframeId: any, cameraCode: string) {
    const win: any = window;
    win.imosSdk.playLive(
      iframeId,
      cameraCode,
      cameraCode,
      (e: any) => {
        console.log("播放回调");
        console.log(e);
      },
      0
    );
  }
  playRecord(iframeId: any, cameraCode: string, start: any, end: any) {
    const win: any = window;
    win.imosSdk.playRecord(
      iframeId,
      cameraCode,
      cameraCode,
      start,
      end,
      (e: any) => {
        console.log("回放回调");
        console.log(e);
      }
    );
  }
  submit() {}
  closeDialog() {
    this.$store.commit("panel/setDialogShow", false);
  }
  mouseDownLeft(event: any, id: string, sTop: number, sRight: number) {
    mouseDownLeft(event, id, sTop, sRight);
  }
}
</script>

<style lang="scss" scoped>
.inspetion-video-dialog {
  width: 995px;
  height: 691px;
  background-image: url(../../assets/images/dialogs/tanchuangbeijingkuang-2.png);
  background-size: 100% 100%;
  position: fixed;
  left: 0;
  top: -680px;
  z-index: 1000;
  color: #b4d8f7;
  .header {
    width: 100%;
    height: 40px;
    padding: 15px 15px 0 15px;
    .header-bg {
      position: absolute;
      width: calc(100% - 30px);
      height: 32px;
      background-image: url(../../assets/images/dialogs/tuanchuangbiaotibeijing.png);
      background-size: 100% 100%;
      margin-top: 2px;
    }
    .header-title {
      width: calc(100% - 30px);
      height: 17px;
      font-family: AlibabaPuHuiTi_2_85_Bold;
      font-size: 18px;
      line-height: 20px;
      color: #ffffff;
      padding-left: 25px;
      position: absolute;
    }
    .header-close {
      position: absolute;
      left: calc(100% - 40px);
      width: 20px;
      height: 20px;
      background-image: url(../../assets/images/dialogs/tanchuangguanbi.png);
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
  .header-title {
    padding-left: 50px !important;
  }
  .iframeDom {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
  }
  .main {
    width: 100%;
    padding: 15px;
    height: calc(100% - 40px);
  }
}
</style>
<style lang="scss"></style>
